<!doctype html>
<html lang="en">

<head>
	<meta charset="utf-8">
	<title>Meny - A three dimensional and space efficient menu concept</title>
	<meta name="description" content="A three dimensional and space efficient menu created with JavaScript and CSS 3.">
	<meta name="author" content="Hakim El Hattab">
	<meta name="viewport" content="width=800, user-scalable=no">
	<link rel="stylesheet" href="../lib/css/manger/index.css">
</head>

<body>
	<div class="meny">
		<h2>班级管理</h2>
		<ul>
			<li><a href="#">班级制度</a></li>
			<li><a href="#">学习制度</a></li>
			<li><a href="#">纪律制度</a></li>
			<li><a href="#">值日制度</a></li>
			<li><a href="#">扣分制度</a></li>
			<li><a href="#">班费明细</a></li>
			<li><a href="#">Sinuous for iOS</a></li>
			<li><a href="#">DOM Tree</a></li>
			<li><a href="#">Holobox</a></li>
			<li><a href="#">404</a></li>
		</ul>
	</div>
	<div class="meny-arrow"></div>
	<div class="contents">
		<!-- 班级制度 -->
		<div class="class special">
			<div class="class-left">
				<a href=""><img src="../lib/images/manger/class.jpeg" alt=""></a>
			</div>
			<div class="class-right">
				<h1>班级制度</h1>
				<div class="logo"></div>
				<p>班级制度，即班规，是指学生管理班级中采取的规章制度，简称班规。每个班的班规都不一样，主要涉及学习、纪律、出勤、卫生等诸多方面，是学生自我管理的重要制度。是为了更好地规范班级成员的行为，形成一个健康向上、团结互助的集体氛围。
				</p>
				<div class="slide">
					<a href="#down1" class="first" id="down1">了解更多</a>
				</div>
			</div>
		</div>
		<div></div>
		<div class="downf">
			<p>
				严格按照学生手册执行班级日常管理
			</p>
			<ul>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					教学区域玩游戏班级处理方式:无论是否上课不允许联网(特殊情况除外)，网络游戏，电脑自带游戏，手机游戏等不允许在教室出现，一经发现扣除相应学分，
					联系家长除扣取学分外，第一次写保证书在课上检讨并抄写学生手册扣分项10遍，第二次直接没收手机一个星期。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					待定区:凡是不遵守组内、班级和学校等规则的同学放到待定区,不管成绩好坏。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					请假:请假按学生手册进行,并通知家长,请假期间需把缺的课补齐,返校后有考核,考核不通过者以后不批假病假不可在宿舍,只能在医院,不可事后请假。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					晚归:生活委员查寝时，未在寝室者，- 律算晚归。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					夜不归宿:夜不归宿未提前当面请假者按夜不归宿处理。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					宿舍纪律:晚11点后不允许发出打扰他人体息的声音，经举报追究到个人，扣除相应学分，大家可以录音举证。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					上课迟到(7:50): 扣除学分+打扫卫生(副班长进行每天记录)。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					不定时抽查手机袋，未上交手机同学必须带手机进教室。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					每天下课看好时间，上课前必须坐好等待讲师上课。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					卫生被学校检查到不合格的罚一周，再不合格连罚。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					代码三遍未完成，未完成部分组长抄15遍，可分配给组员抄，但是组长必须要抄超过一半。</li>
				<li>
					<img src="../lib/images/manger/list.png" alt="">
					演讲要求: ppt形式，主题明确，内容丰富。</li>
			</ul>
		</div>

		<!-- 学习制度 -->
		<div class="class">
			<div class="class-right study">
				<h1>学习制度</h1>
				<div class="logo"></div>
				<p>学习制度，是为了使我们形成一个良好的班级学习氛围且帮助我们更好的学习而制定的一个制度。各方面都该有自己的一套体系和制度，来帮助同学们更好的发展，在学习方面就该有学习方面的制度，使同学们有一个集体的学习的团结感。
				</p>
				<div class="slide">
					<a href="#down2" class="second" id="down2">了解更多</a>
				</div>
			</div>
			<div class="class-left">
				<a href=""><img src="../lib/images/manger/study.jpeg" alt=""></a>
			</div>
		</div>
		<div class="downs">
			<p>1234567assedrxftcgyhjuki,vvc</p>
		</div>

		<!-- 纪律制度 -->
		<div class="class">
			<div class="class-left">
				<a href=""><img src="../lib/images/manger/manger.jpeg" alt=""></a>
			</div>
			<div class="class-right">
				<h1>纪律制度</h1>
				<div class="logo"></div>
				<p>
					“没有规矩，不成方圆”，班级的课堂纪律是一个班成功与否的关键。课堂纪律是顺利进行课堂教学活动的保证。通过课堂纪律管理，可以培养学生自觉遵守纪律的好习惯，创建一个最佳的教学环境，提高课堂教学效率。
				</p>
				<div class="slide">
					<a href="#down3" class="third" id="down3">了解更多</a>
				</div>
			</div>
		</div>
		<div class="downt">
			<p>1234567assedrxftcgyhjuki,vvc</p>
		</div>

		<!-- 值日制度 -->
		<div class="class">
			<div class="class-right study">
				<h1>值日制度</h1>
				<div class="logo"></div>
				<p>班级制度，即班规，是指学生管理班级中采取的规章制度，简称班规。每个班的班规都不一样，主要涉及学习、纪律、出勤、卫生等诸多方面，是学生自我管理的重要制度。是为了更好地规范班级成员的行为，形成一个健康向上、团结互助的集体氛围。
				</p>
				<div class="slide">
					<a href="#down4" class="fourth" id="down4">了解更多</a>
				</div>
			</div>
			<div class="class-left">
				<a href=""><img src="../lib/images/manger/clean.jpeg" alt=""></a>
			</div>
		</div>
		<div class="downo">
			<p>1234567assedrxftcgyhjuki,vvc</p>
		</div>

		<!-- 扣分制度 -->
		<div class="class">
			<div class="class-left">
				<a href=""><img src="../lib/images/manger/score.jpeg" alt=""></a>
			</div>
			<div class="class-right">
				<h1>扣分制度</h1>
				<div class="logo"></div>
				<p>班级制度，即班规，是指学生管理班级中采取的规章制度，简称班规。每个班的班规都不一样，主要涉及学习、纪律、出勤、卫生等诸多方面，是学生自我管理的重要制度。是为了更好地规范班级成员的行为，形成一个健康向上、团结互助的集体氛围。
				</p>
				<div class="slide">
					<a href="#down5" class="fifth" id="down5">了解更多</a>
				</div>
			</div>
		</div>
		<div class="downv">
			<p>1234567assedrxftcgyhjuki,vvc</p>
		</div>
	</div>

	<script src="../lib/js/manger/index.js"></script>
	<script>
		var meny = Meny.create({
			menuElement: document.querySelector('.meny'),
			contentsElement: document.querySelector('.contents'),
			position: Meny.getQuery().p || 'left',
			height: 200,
			width: 260,
			threshold: 40,
			mouse: true,
			touch: true
		});
		if (Meny.getQuery().u && Meny.getQuery().u.match(/^http/gi)) {
			var contents = document.querySelector('.contents');
			contents.style.padding = '0px';
			contents.innerHTML = '<div class="cover"></div><iframe src="' + Meny.getQuery().u + '" style="width: 100%; height: 100%; border: 0; position: absolute;"></iframe>';
		}
	</script>
	<script src="../lib/js/manger/jquery-3.3.1.js"></script>
	<script>

		flag1 = false, flag2 = false, flag3 = false, flag4 = false, flag5 = false;
		function fn(class1, class2) {
			if (flag == true) {
				$(class1).css("background-image", "url(../lib/images/manger/arrowt.png)");
			} else {
				$(class1).css("background-image", "url(../lib/images/manger/arrow.png)");
			}
			$(class2).slideToggle('slow');
		}
		$('.slide .first').click(function () {
			if (flag1 == false) {
				flag1 = true;
			} else {
				flag1 = false;
			}
			flag = flag1;
			fn(".first", ".downf");
		})
		$('.slide .second').click(function () {
			if (flag2 == false) {
				flag2 = true;
			} else {
				flag2 = false;
			}
			flag = flag2;
			fn(".second", ".downs");
		})
		$('.slide .third').click(function () {
			if (flag3 == false) {
				flag3 = true;
			} else {
				flag3 = false;
			}
			flag = flag3;
			fn(".third", ".downt");
		})
		$('.slide .fourth').click(function () {
			if (flag4 == false) {
				flag4 = true;
			} else {
				flag4 = false;
			}
			flag = flag4;
			fn(".fourth", ".downo");
		})
		$('.slide .fifth').click(function () {
			if (flag5 == false) {
				flag5 = true;
			} else {
				flag5 = false;
			}
			flag = flag5;
			fn(".fifth", ".downv");
		})

		// $('.slide').click(function () {
		// 	document.documentElement.scrollTop = 9000;
		// })

		// var scrollImg = document.querySelector('.first');
		// var downf = document.querySelector('.downf');
		// scrollImg.onclick = function () {
		// 	// downf.scrollTop = 100;
		// 	console.log(downf.scrollTop);
		// }


		// window.addEventListener('scorll', function () {
		// 	if (getScroll().top >= 1000) {
		// 		$('.downf').animate({
		// 			'top': '0px'
		// 		}, 1000)
		// 	}
		// })
	</script>
</body>

</html>